<template>
  <div>
    <a-space style="margin: 20px">
      <a-popover title="">
        <template slot="content">
          {{ searchShow ? "关闭搜索" : "打开搜索" }}
        </template>
        <a-button :icon="searchShow ? 'minus' : 'plus'" @click="onOpenSearch" />
      </a-popover>

      <a-button icon="ref" @click="reInit">重置</a-button>
    </a-space>
    <el-collapse-transition>
      <a-card v-if="searchShow" style="margin: 20px">
        <span>
          编号：
          <el-input
            size="mini"
            v-model="pvalue.uuid"
            style="width: 150px; margin-right: 20px"
          />
          调查对象身份证：
          <el-input
            size="mini"
            v-model="pvalue.idNumber"
            style="width: 150px; margin-right: 20px"
            allow-clear
          />
        </span>
        <a-button style="margin-left: 10px" icon="search" @click="onSearch" />
      </a-card>
    </el-collapse-transition>

    <a-table
      style="margin: 20px"
      rowKey="uuid"
      :columns="columns"
      :data-source="data"
      @change="onPageChange"
      :loading="loadding"
      :pagination="pager"
    >
      <span slot="action" slot-scope="record">
        <a-button
          v-if="
           (!record.projectList) || (!record.projectList.includes(projectName))
          "
          
          size="small"
          @click="onAdd(record)"
        >
          添加
        </a-button>
        <a-button
          v-else
          type="danger"
          size="small"
          @click="onDelete(record)"
        >
          移除
        </a-button>
      </span>
    </a-table>
  </div>
</template>

<script>
import { deleteJSON, getData, logout, postJSON, putJSON } from "@/utils/http";
import { getANLogsMap } from "@/utils/attr-map";
import { METADATA_CONFIG, URL_MAP } from "@/config/config";
import { mapGetters } from "vuex";
// import { deleteJSON, getData, putJSON } from "@/utils/http";
export default {
  data() {
    return {
      dialogVisible: false,
      collapsed: false,
      current: ["user"],
      columns: [],
      data: [],
      loadding: false,
      pager: {
        pageSize: 10,
        current: 1,
      },
      pvalue: {
        state: "",
        idNumber: "",
        uuid: "",
      },
      review: {
        msg: "无",
        uuid: "",
        pass: true,
      },
      reviewDialogVisible: false,
      searchShow: true,
      params: {},
      paramKey: "sh-log-table-session",
    };
  },
  computed: {
    ...mapGetters([
      "userid",
      "token",
      "isProject",
      "isLogin",
      "username",
      "projectName",
    ]),
  },

  methods: {
    onAdd(obj) {
        this.loadding = true
        putJSON(URL_MAP.PROJECT_RECORD, {
            name: this.projectName,
            uuid: obj.uuid
        })
        .then(res => {
            if (res.code === 0) {
            this.$message.success('添加成功')
            }
            else{
            this.$message.error(res.msg)
            }
        })
        .catch(e => {
            console.log(e)
            this.$message.error('添加失败')
        })
        .finally(() => {
            this.loadding = false
            this.fetch()
        })
    },
    onDelete(obj) {
      this.loadding = true;
      deleteJSON(URL_MAP.PROJECT_RECORD, {
        name: this.projectName,
        uuid: obj.uuid,
      })
        .then((res) => {
          if (res.code === 0) {
            this.$message.success("提交成功");
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((e) => {
          console.log(e);
          this.$message.error("提交失败");
        })
        .finally(() => {
          this.loadding = false;
          this.fetch();
        });
    },
    init() {
      let columns = getANLogsMap();
      columns.push({
        key: "action",
        scopedSlots: { customRender: "action" },
      });
      this.columns = columns;

      this.params = {
        pageSize: this.pager.pageSize,
        currentPage: this.pager.current - 1,
      };

      // console.log(this.pager)
      this.fetch();
    },
   
    reInit() {
      this.params = {
        pageSize: this.pager.pageSize,
        currentPage: this.pager.current - 1,
      };
      this.fetch();
    },

    async fetch() {
      this.loadding = true;
      try {
        this.params.templateType = METADATA_CONFIG.RECORD;
        let data = await getData(URL_MAP.LOG_LIST, this.params);
        // console.log(data);
        data = data.data;
        const pager = { ...this.pager };
        pager.total = data.totalCount;
        // pager.current = data.current
        pager.pageSize = data.pageSize;
        this.pager = pager;
        this.data = data.data.map(v => {
            v.projectList = v.projectList || []
            return v;
        });
      } catch (e) {
        console.log(e);
      } finally {
        this.loadding = false;
      }
    },
    onOpenSearch() {
      this.searchShow = !this.searchShow;
    },
   
    onSearch() {
      for (let k in this.pvalue) {
        if (this.pvalue[k]) {
          this.params[k] = this.pvalue[k];
        }
      }
      this.fetch();
    },
    onPageChange(pagination, filters, sorter) {
      const pager = { ...this.pager };
      pager.current = pagination.current;
      this.pager = pager;
      this.params.pageSize = pager.pageSize;
      this.params.currentPage = pager.current - 1;
      this.fetch();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
</style>